<template>
  <div class="shopcart">
    <navbar>
      <div slot="center">购物车</div>
    </navbar>
    <div style="height:44px;"></div>
    <div
      class="cart-list"
      v-for="item in $store.state.cart"
      :key="item.id"
    >
      <div class="cart-l">
        <van-checkbox v-model="item.selected"></van-checkbox>
      </div>
      <div class="cart-r">
        <van-card
          :price="item.price+'.00'"
          :desc="String(item.stock)"
          :title="item.shopName"
          :thumb="item.src"
        >
          <template #num>
            <van-stepper v-model="item.count" />
          </template>
        </van-card>
      </div>
    </div>
    <van-submit-bar
      :price="$store.getters.getAllPrice*100"
      button-text="提交订单"
    />
    <!-- <van-submit-bar
      :price="1"
      button-text="提交订单"
    >
      <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar> -->
  </div>
</template>
<script>
import Navbar from 'components/common/navbar/Navbar.vue'
export default {
  components: {
    Navbar
  },
<<<<<<< HEAD
  data: () => ({
    radio: true,
    // value: 2,
    checked: true
  }),
  methods: {
    async Cartlist() {
      const res = await Cartlist('/api/shopcart')
      console.log(res)
    }
  },
  created() {
    console.log(this.radio)
=======
  created() {
    console.log(1);
    console.log(this.$store.state.shop);
>>>>>>> detail
  }
}
</script>
<style lang="less">
.shopcart {
  padding: 10px;
  .cart-list {
    display: flex;
    .cart-l {
      flex: 0.4;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .cart-r {
      flex: 2;
    }
    .van-card__title {
      text-align: left;
      float: left;
      margin-top: 10px;
    }
    .van-card__desc {
      float: right;
      margin-top: 10px;
    }
    .van-card__price {
      margin-right: 20px;
    }
  }
  .van-submit-bar {
    position: fixed;
    bottom: 55px;
    left: 0;
    z-index: 100;
    width: 100%;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #fff;
    -webkit-user-select: none;
    user-select: none;
  }
}
</style>
